<template>
  <div>
    <div>
      <a-button type="primary" @click="showModal">添加根节点</a-button>
    </div>
    <a-modal v-model="visible" :title="istitle" @ok="handleOk">
      <a-form-model
        ref="ruleForm"
        hideRequiredMark
        :model="ruleForm"
        :rules="rules"
        :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }"
      >
        <a-form-model-item has-feedback label="行政区域名称" prop="isvalue" >
          <a-input v-model="ruleForm.isvalue" size="large"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!--  -->
    <div>
      <a-tree
        :show-line="true"
        :show-icon="true"
        :defaultExpandAll="true"
        :tree-data="treeData"
        :replace-fields="replaceFields"
        @select="onSelect"
      >
        <a-icon slot="icon" type="carry-out" />
        <template slot="custom" slot-scope="item">
          <span class="icon-wrap" @click="delNode(item)">
            <a-icon type="delete" style="line-height: 32px;" />
          </span>
          <span class="icon-wrap" @click="editNode(item)">
            <a-icon type="edit" style="line-height: 32px;" />
          </span>
          <span class="icon-wrap" @click="addNewNode(item)" v-if="item.parentId== null">
            <a-icon type="plus" style="line-height: 32px;" />
          </span>
        </template>
      </a-tree>
    </div>
    <!--  -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: { isvalue: "" },
      rules: {
        isvalue: [
          { required: true, trigger: "blur", message: "行政区域名不能为空！" }
        ]
      },
      delvisible: false,
      istitle: "新增行政区域根节点",
      visible: false,
      setroleid: "",
      parentId: null,
      replaceFields: {
        children: "children",
        title: "name",
        key: "id"
      },
      treeData: []
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    query() {
      this.$axios.post("/area/service/findByPage").then(res => {
        if (res.code == 200) {
          this.treeData = res.data;
          this.treeData.forEach(item => {
            item.scopedSlots = { icon: "custom" };
            if (item.children != null) {
              const cdata = item.children;
              cdata.forEach(citem => {
                citem.scopedSlots = { icon: "custom" };
              });
            }
          });
        } else {
          this.$message.success(res.msg);
        }
      });
    },
    onSelect(keys, event) {
      console.log("Trigger Select", keys, event);
    },
    delNode(item) {
      //点击删除
      console.log("确认");
      let that = this;
      let data = {
        id: item.id
      };
      this.$confirm({
        title: "是否删除该节点信息?",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$axios.post("/area/service/deleteByIds", data).then(res => {
            that.$message.success(res.msg);
            that.query();
          });
        },
        onCancel() {
          console.log("取消");
        }
      });
    },
    editNode(item) {
      //点击编辑
      this.visible = true;
      this.istitle = "编辑行政区域根节点";
      console.log(item);
      this.setroleid = item.id;
      this.ruleForm.isvalue = item.name;
    },
    addNewNode(item) {
      //点击新增
      this.visible = true;
      this.istitle = "新增子节点";
      this.ruleForm.isvalue = "";
      console.log(item);
      this.parentId = item.id;
    },
    showModal() {
      this.visible = true;
      this.ruleForm.isvalue = "";
      this.parentId = null;
    },
    handleOk(e) {
      let that = this;
      let data = {};
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          switch (this.istitle) {
            case "新增行政区域根节点":
              data = {
                name: this.ruleForm.isvalue
              };
              that.$axios.post("/area/service/create", data).then(res => {
                if (res.code == 200) {
                  that.$message.success(res.msg);
                  that.query();
                  that.visible = false;
                } else {
                  that.$message.success(res.msg);
                }
              });
              break;
            case "编辑行政区域根节点":
              data = {
                id: that.setroleid,
                name: that.ruleForm.isvalue
              };
              that.$axios.post("/area/service/edit", data).then(res => {
                if (res.code == 200) {
                  that.$message.success(res.msg);
                  that.query();
                  that.visible = false;
                }
              });
              break;
            default:
              data = {
                // id: that.setroleid,
                parentId: that.parentId,
                name: that.ruleForm.isvalue
              };
              that.$axios.post("/area/service/create", data).then(res => {
                if (res.code == 200) {
                  that.$message.success(res.msg);
                  that.query();
                  that.visible = false;
                } else {
                  that.$message.success(res.msg);
                }
              });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.icon-wrap {
  display: inline-block;
  width: 30px;
}
::v-deep .ant-tree li span.ant-tree-switcher,
.ant-tree li span.ant-tree-iconEle {
  height: 32px;
  line-height: 32px;
}
::v-deep .ant-tree-title {
  float: left;
  width: 600px;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper:hover {
  background-color: #76d4ff;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: rgba(255, 255, 255, 0);
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  width: 700px;
  height: 32px;
  line-height: 32px;
}
.ant-form-item{
    margin-bottom: 0px;
}
</style>